import React, { useState } from 'react';
import { ChevronLeft, Calendar, MapPin, Users, Plus } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const MovieEvent = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('upcoming');
  
  return (
    <div className="flex flex-col h-full pb-16">
      {/* 头部 */}
      <div className="wx-header">
        <div className="wx-header-back" onClick={() => navigate('/')}>
          <ChevronLeft size={24} />
        </div>
        <div className="wx-header-title">观影包场</div>
      </div>
      
      <div className="wx-content">
        {/* 标签页 */}
        <div className="bg-white border-b">
          <div className="flex">
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'upcoming' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('upcoming')}
            >
              即将开始
            </div>
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'popular' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('popular')}
            >
              热门活动
            </div>
            <div 
              className={`flex-1 text-center py-3 ${activeTab === 'mine' ? 'text-green-500 border-b-2 border-green-500' : 'text-gray-600'}`}
              onClick={() => setActiveTab('mine')}
            >
              我的活动
            </div>
          </div>
        </div>
        
        {/* 活动列表 */}
        <div className="p-3 space-y-4">
          {[1, 2, 3, 4].map((item) => (
            <div key={item} className="bg-white rounded-lg shadow-sm overflow-hidden">
              {/* 电影海报 */}
              <div className="h-40 bg-gray-200 relative">
                <div className="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded">
                  热门
                </div>
              </div>
              
              {/* 活动信息 */}
              <div className="p-3">
                <h3 className="font-medium mb-2">《新电影》粉丝见面会观影活动</h3>
                
                <div className="space-y-1 mb-3">
                  <div className="flex items-center text-sm text-gray-600">
                    <Calendar size={16} className="mr-2" />
                    <span>2025年6月15日 19:00</span>
                  </div>
                  <div className="flex items-center text-sm text-gray-600">
                    <MapPin size={16} className="mr-2" />
                    <span>北京市朝阳区某影城</span>
                  </div>
                  <div className="flex items-center text-sm text-gray-600">
                    <Users size={16} className="mr-2" />
                    <span>已报名：24/50人</span>
                  </div>
                </div>
                
                <div className="flex justify-between items-center">
                  <div>
                    <span className="text-red-500 font-medium">¥50</span>
                    <span className="text-xs text-gray-500 ml-1">（订金）</span>
                  </div>
                  <button className="wx-button text-sm py-1 px-4 rounded-full">
                    立即报名
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* 发布按钮 */}
      <div className="fixed right-5 bottom-20">
        <button className="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center shadow-lg">
          <Plus size={24} className="text-white" />
        </button>
      </div>
    </div>
  );
};

export default MovieEvent;